<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
	<head>
		<title>支付平台-网关支付</title>
	 	<%@ include file="../../page/taglib.jsp" %>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta content=always name=referrer> -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" type="text/css" href="${base}/static/gateway/css/gatewayMain_pc.css" media="screen and (min-width:769px)">
		<link rel="stylesheet" type="text/css" href="${base}/static/gateway/css/gatewayMain_mobile.css" media="screen and (max-width:768px)">
		<link rel="stylesheet" type="text/css" href="${base}/static/gateway/css/showLoading.css"/>

		<!--[if lte IE 8]>
		<script src="../../static/common/js/html5shiv.js"></script>
		<script src="../../static/common/js/respond.min.js"></script>
		<script src="../../static/common/js/jquery-1.10.2.min.js"></script>
		<script src="../../static/common/js/jquery-1.3.2.min.js"></script>
		<![endif]-->
		<!--[if gte IE 9]>
		<![endif]-->
		<!--[if !IE]> -->

		<script src="${base}/static/common/js/jquery-3.0.0.min.js"></script>

		<!-- <![endif]-->
		<script src="${base}/static/gateway/js/gatewayMain.js"></script>
		<script src="${base}/static/gateway/js/jquery.showLoading.min.js"></script>
		<script src="${base}/static/gateway/js/jquery.validate.js"></script>
		<script>
			//TODO 设置页面不允许刷新F5等等
			var _payNo = "${_payNo}";
			var sign = "${sign}";
			var _merchantCode = "${_merchantCode}";
			var _accountName = "${_accountName}";
			var _accountNo = "${_accountNo}";
			var _cardType = "${_cardType}";
			var _cardNo = "${_cardNo}";
			var _mobile = "${_mobile}";

			$(function(){
				<!-- 设置用户姓名 -->
				if(_accountName != null && _accountName != ''){
					$("#name").remove();
					var $h1=$('<label id="name">'+_accountName+'</label>');
					$("#fName").append($h1);
				}

				<!-- 设置证件类型 -->
				if(_cardType != null && _cardType != ''){
					$("#cardIDType").remove();
					var _cardTypeName = "";

					if(_cardType == '1'){
						_cardTypeName = '身份证';
					}else if (_cardType == '2') {
						_cardTypeName = '军官证';
					}else if (_cardType == '3') {
						_cardTypeName = '驾驶证';
					}else if (_cardType == 'A') {
						_cardTypeName = '护照';
					}

					var $h1=$('<label>'+_cardTypeName+'</label>'+'<label id="cardIDType" style="display:none;visibility:hidden;" >'+_cardType+'</label>');
					$("#fCardIDType").append($h1);
				}

				<!-- 设置证件号码 -->
				if(_cardNo != null && _cardNo != ''){
					$("#cardIdNo").remove();
					var $h1=$('<label id="cardIdNo">'+_cardNo+'</label>');
					$("#fCardIdNo").append($h1);
				}

				<!-- 设置手机号码 -->
				if(_mobile != null && _mobile != ''){
					$("#mobile").remove();
					var $h1=$('<label id="mobile">'+_mobile+'</label>');
					$("#fMobile").after($h1);
				}
				
				<!-- 设置卡号 -->
				//if(_accountNo != null && _accountNo != ''){
				//	$("#cardNo").remove();
				//	var $h1=$('<label id="accountNo">'+_accountNo+'</label>');
				//	$("#fCardNo").append($h1);
				//}


				//银行选中触发值
                $(":radio").click(function(){
                    $("#select_bank_name").val($(this).val());
                });

                $("#select_bank_name").click(function(){
                    var bankName = $("#select_bank_name").val();
                    $(":radio[name='bankCode'][value='" + bankName + "']").prop("checked", "checked");
                });

                //浏览器大小发生变化触发事件
                $(window).resize(function(){
                    //process here

                });
				//银行卡号 间隔4位 显示
                $('#cardNo').on('keyup mouseout input',function(){
                    var $this = $(this),
                        v = $this.val();
                    /\S{5}/.test(v) && $this.val(v.replace(/\s/g,'').replace(/(.{4})/g, "$1 "));
                });

			});

		</script>
	</head>
	<body>
		<div id="activity_pane">
		<!--头部div块加载一个图片 -->
		<div id="head">
			<span id="payingOnline" style="color: black">支付平台</span>
		</div>
		<div id="target"></div>
		<div class="mainContent">
		<!--左侧div块，显示产品信息 -->
		<div id="left">
		<div id="ddxq"><span id="orderDetails">订单详情</span></div>
		<div class="linehr"></div>
		<div id="xq">
		<div class="orderInfo"><span class="halfA">应付金额：</span><span class="moright" style="color:red;">¥&nbsp;${_payAmount}</span></div>
		<div class="orderInfo"><span class="halfA">支付订单号：</span><span class="moright">${_payNo}</span><span class="doflag up">收起</span></div>
		<div class="order  orderInfo"><span class="halfA">商品名称：</span><span class="moright">${_tradeDesc}</span></div>
		<div  class="order order_visim orderInfo"><span class="halfA">交易单号：</span><span>${_serialNo}</span></div>
		</div>
		</div>
		<!--右侧div块，显示银行与个人信息 -->
		<div id="right">
		<div id="selectBandcardDiv">选择银行卡</div>
		<div class="linehrright"></div>
		<div class="allBank">

			<div class="aline aline_ac">
				<c:forEach items="${merchantBankDTOList}" var="merchantBankDTO" >
					<div class="bankkind" >
						<input id="${merchantBankDTO.bankCode}" value="${merchantBankDTO.bankCode}"
							   type="radio" name="bankCode" class="bankyh">
						<label for="${merchantBankDTO.bankCode}"><img alt="${merchantBankDTO.bankName}"
							 src="${base}/static/gateway/img/${merchantBankDTO.bankCode}.png">
						</label>
					</div>
				</c:forEach>
				<span class="more">更多</span>
			</div>
			<div class="error_1 none"></div>
		</div>

		<div id="bankCardInfo">银行卡信息 </div>
		<div class="linehrright"></div>

		<form action="">
		<div class="bankgeren">

		<%--<div class="bline" >
			<div class="bankName"><span>银行：</span>
				<input class="bankgereninfo" type="text" id="bankKind" name="bankKind" placeholder="选择银行" >

			</div>

		</div>--%>

		<%--<div class="bline">
			<div class="bankkind" id="fName"><span>姓名：</span><input class="bankgereninfo" type="text" id="name" name="name" placeholder="请输入姓名"></div>

			<div class="bankkind"><span>证件类型：</span>
			<a class="btn-select" id="btn_select"><span id="cardIDType"></span>
			<select id="select" class="cur-select">
			 <!--  <option selected="selected" id="morenlei">请选择证件类型</option> -->
			  <option value="1">身份证</option>
			  <option value="2">军官证</option>
			  <option value="3">驾驶证</option>
			  <option value="4">护照</option>
			</select>
			</a>
			</div>

		</div>

		<div class="bline">
			<div class="bankkind" id="fCardIdNo"><span>证件号：</span><input class="bankgereninfo" type="text" id="cardIdNo" name="cardIdNo" placeholder="请输入证件号"></div>
			<div class="bankkind"><span>卡号：</span><input class="bankgereninfo" type="text" id="cardNo" name="cardNo" placeholder="请输入银行卡号">
				<div class="error error_1">请输入银行卡号</div>
			</div>

		</div>

		<div class="bline">
			<div class="bankkind">
				<span id="fMobile">手机号码：</span>
				<input class="bankgereninfo" type="text" id="mobile" name="mobile" placeholder="银行预留手机号码">
					<input class="getauthcode" type="button" value="获取验证码" id="getmobliecode" OnClick="sendYzm();settime(this);"/>
			</div>
			 <div class="bankkind"><span>验证码：</span><input class="bankgereninfo" type="text" id="authCode" name="authCode" placeholder="请输入验证码">
				 <div class="error error_1">请输入验证码</div>
				 <div class="error error_1">验证码错误</div>
				</div>
		</div>--%>


		<!-- 	<div class="noticean"><span id="anquan"><img alt="竖线" src="../static/img/tick.png" style="height: 16px;width:15px;">&nbsp;&nbsp;支付环境安全</span></div>-->
			<div class="list_item_all">
				<div class="list_item list_item_sp"><span class="item_la">银行：</span>
						<select id="select_bank_name" class="">
							<!--  <option selected="selected" id="morenlei">请选择证件类型</option> -->
							<option value="-1">请选择银行</option>
							<c:forEach items="${merchantBankDTOList}" var="merchantBankDTO" >
								<option value="${merchantBankDTO.bankCode}">${merchantBankDTO.bankName}</option>
							</c:forEach>
						</select>
					<div class="error_1 none"></div>
				</div>
				<div class="list_item item_1" id="fName"><span class="item_la">姓名：</span><input class="bankgereninfo" type="text" id="name" name="name" placeholder="请输入姓名"></div>

			<div class="list_item" id="fCardIDType"><span class="item_la">证件类型：</span>
				<select id="cardIDType" class="cur-select">
					<!--  <option selected="selected" id="morenlei">请选择证件类型</option> -->
					<option value="1">身份证</option>
					<option value="2">军官证</option>
					<option value="3">驾驶证</option>
					<option value="A">护照</option>
				</select>
				<div class="error_1 none"></div>
			</div>


			<div class="list_item" id="fCardIdNo"><span class="item_la">证件号：</span><input class="bankgereninfo" type="text" id="cardIdNo" name="cardIdNo" placeholder="请输入证件号"></div>
			<div class="list_item" id="fCardNo"><span class="item_la">卡号：</span><input class="bankgereninfo" maxlength="23" type="text" id="cardNo" name="cardNo" placeholder="请输入银行卡号">
				<div class="error_1 none"></div>
			</div>

			<div class="list_item">
				<span id="fMobile" class="item_la">手机号码：</span>
				<input class="bankgereninfo" type="text" id="mobile" name="mobile" placeholder="银行预留手机号码">
				<div class="getauthcode" type="button"  id="getmobliecode" OnClick="sendYzm();">获取验证码</div>
			</div>
			<div class="list_item"><span  class="item_la">验证码：</span><input class="bankgereninfo" type="text" id="authCode" name="authCode" placeholder="请输入验证码">
				<div class="error_1 none"></div>
			</div>
			<div class="noticefu" id="zhifubutton"> <input id="paymentButton"  type="button" value="立即支付" OnClick="applyPay();" ></div>
		</div>
		</form>

		</div>
		</div>
		</div>
	</body>
</html>